<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px', paddingBottom: info.state === 1 && '200rpx'}">
		
		<navBar title="售后详情" />
		
		<!-- 步骤条 -->
		<view class="c-step">
			<u-steps
				:current="stepCurrent"
				activeColor="#CF1A1B"
			>
			<!-- 售后单状态 1待受理、2已受理 3已派单 4已接单 5待鉴定、6处理中、7已完成、8已关闭 -->
			
			<!-- 使用template判断, 避免兼容问题 -->
			<template v-if="info.state !== 8">
				<u-steps-item title="提交申请" propsClass="csi-item-line">
					<view class="csi-icon" slot="icon">1</view>
				</u-steps-item>
				<u-steps-item title="客服受理" :propsClass="info.state >= 2 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 2 ? 'csi-icon' : '']" slot="icon">2</view>
				</u-steps-item>
				<u-steps-item title="客服派单" :propsClass="info.state >= 3 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state>= 3 && 'csi-icon']" slot="icon">3</view>
				</u-steps-item>
				<u-steps-item title="供应商接单" :propsClass="info.state >= 4 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 4 && 'csi-icon']" slot="icon">4</view>
				</u-steps-item>
				<u-steps-item :title="info.state !== 8 ? '售后完成' : '售后关闭'" :propsClass="info.state >= 7 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 7 && 'csi-icon']" slot="icon">
					{{ info.state !== 8 ? 5 : 3}}
					</view>
				</u-steps-item>
			</template>
			<template v-else>
				<u-steps-item title="提交申请" propsClass="csi-item-line">
					<view class="csi-icon" slot="icon">1</view>
				</u-steps-item>
				<u-steps-item title="客服受理" :propsClass="info.state >= 2 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 2 ? 'csi-icon' : '']" slot="icon">2</view>
				</u-steps-item>
				<u-steps-item :title="info.state !== 8 ? '售后完成' : '售后关闭'" :propsClass="info.state >= 7 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 7 && 'csi-icon']" slot="icon">
					{{ info.state !== 8 ? 5 : 3}}
					</view>
				</u-steps-item>
			</template>
<!-- 				<u-steps-item title="提交申请" propsClass="csi-item-line">
					<view class="csi-icon" slot="icon">1</view>
				</u-steps-item>
				<u-steps-item title="客服受理" :propsClass="info.state >= 2 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 2 ? 'csi-icon' : '']" slot="icon">2</view>
				</u-steps-item>
				<u-steps-item title="客服派单" v-if="info.state !== 8" :propsClass="info.state >= 3 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state>= 3 && 'csi-icon']" slot="icon">3</view>
				</u-steps-item>
				<u-steps-item title="供应商接单" v-if="info.state !== 8" :propsClass="info.state >= 4 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 4 && 'csi-icon']" slot="icon">4</view>
				</u-steps-item>
				<u-steps-item :title="info.state !== 8 ? '售后完成' : '售后关闭'" :propsClass="info.state >= 7 && 'csi-item-line'">
					<view :class="['csi-icon-un', info.state >= 7 && 'csi-icon']" slot="icon">
					{{ info.state !== 8 ? 5 : 3}}
					</view>
				</u-steps-item> -->
			</u-steps>
			
			<!-- 状态描述 -->
			<view class="cs-state" v-if="info.state !== 1">
				<view v-if="info.state !== 8" style="display: flex;">
					<view class="img">
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/aftermarket/ic-car.png" mode=""></image>
					</view>
					<view class="info">
						<text class="desc">
							<text v-if="info.state === 2">客服已受理。请保持电话畅通，方便客服人员联系您。</text>
							<text v-if="info.state === 3">客服已派单。请耐心等待供应商接单。</text>
							<text v-if="info.state === 4">供应商已接单。请保持电话畅通，方便售后人员联系您。</text>
							<text v-if="info.state === 7">售后完成</text>
							<text v-if="info.state === 8">售后已关闭， {{ info.serviceStaffNote }}</text>
						</text>
						<text class="time">
						{{ info.state === 7 ? info.repairTime : info.serviceStaffReceiveTime }}</text>
					</view>
				</view>
				<view class="css-box" v-else>
					<view class="img">
						<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/aftermarket/ic-car.png" mode=""></image>
					</view>
					<view class="info">
							<text class="title" style="line-height: 24px; text-shadow: 0 0 0.1px currentColor;">售后关闭理由</text>
							<text class="desc" user-select>{{ info.serviceStaffNote }}</text>
						<text class="time">
						{{ info.serviceStaffReceiveTime }}</text>
					</view>
				</view>

			</view>
		</view>
		
		<!-- 处理结果  -->
		<view class="c-result" v-if="info.state === 7">
			<view class="c-title">处理结果</view>
			<view class="cr-content">
				<view class="cr-desc">{{ info.repairNote || '' }}</view>
				<view class="cr-img-list">
					<view class="cr-img" v-for="item in info.repairImageList" :key="item">
						<video v-if="videoTypeList.includes(getFileType(item))" :src="item" @error="videoErrorCallback" ></video>
						<image v-else :src="item || currentImg" mode="scaleToFill" @click.stop="handlePreviewImage(item, info.repairImageList)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 鉴定结果  -->
		<view class="c-result" v-if="info.state === 7">
			<view class="c-title">鉴定结果</view>
			<view class="cr-content">
				<view class="cr-desc">{{ info.supplierCheckNote || '' }}</view>
				<view class="cr-img-list" >
					<view class="cr-img" v-for="item in info.supplierCheckImageList" :key="item">
						<video v-if="videoTypeList.includes(getFileType(item))" :src="item" @error="videoErrorCallback" ></video>
						<image v-else :src="item || currentImg" mode="scaleToFill" @click.stop="handlePreviewImage(item, info.supplierCheckImageList)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售后商品 -->
		<view class="c-goods" >
			<view class="c-title">售后商品</view>
			<view class="content">
				<view class="img">
					<image :src="info.orderItem.image" mode=""></image>
				</view>
				<view class="info">
					<view class="name">{{ info.orderItem.goodsName }}</view>
					<view class="num">
						<text class="label">申请数量：</text>
						<text class="value">{{ info.quantity }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售后主题  -->
		<view class="c-result" >
			<view class="c-title">售后主题</view>
			<view class="cr-content">
				<view class="cr-desc">#{{ info.issueTopic || '' }} > {{ info.issueType || '' }}</view>
				<view class="cr-remarks">{{ info.issueDesc || ''}}</view>
				<view class="cr-img-list">
					<view class="cr-img" v-for="item in info.issueImageList" :key="item">
						<video v-if="videoTypeList.includes(getFileType(item))" :src="item" @error="videoErrorCallback" >
							<view class="media-delte" @click.stop="delateImg(item)" v-if="info.state === 1 && !tempIssueImageList.includes(item)"> 
								<uni-icons type="closeempty" size="10" color="rgb(255, 255, 255)"></uni-icons>
							</view>
						</video>
						<image v-else :src="item || currentImg" mode="scaleToFill" @click.stop="handlePreviewImage(item, info.issueImageList)">
							<view class="media-delte" @click.stop="delateImg(item)" v-if="info.state === 1 && !tempIssueImageList.includes(item)">
								<uni-icons type="closeempty" size="10" color="rgb(255, 255, 255)" ></uni-icons>
							</view>
						</image>
					</view>
					<!-- 上传 -->
						<uploadMedia
							v-if="info.state === 1 && info.issueImageList.length < 9"
							class="uploadMedia"
							@handleFile="handleFile"
							:videoSize="200"
							style="min-width: 32%;"
						/>
				</view>
			</view>
		</view>
		
		<!-- 售后明细 -->
		<view class="c-info">
			<view class="c-title">售后明细</view>
			<view class="ci-bottom">
				<view class="cib-list">
					<view class="cibl-label">售后单号：</view>
					<view class="cibl-value">{{ info.serviceNo }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">创建时间：</view>
					<view class="cibl-value">{{ info.createdTime }}</view>
				</view>
				<view class="cib-list" v-if="info.state >= 2">
					<view class="cibl-label">受理时间：</view>
					<view class="cibl-value">{{ info.serviceStaffReceiveTime }}</view>
				</view>
				<view class="cib-list" v-if="info.state >= 3">
					<view class="cibl-label">派单时间：</view>
					<view class="cibl-value">{{ info.serviceStaffHandleTime }}</view>
				</view>
				<view class="cib-list" v-if="info.state >= 4 && info.state !== 8">
					<view class="cibl-label">接单时间：</view>
					<view class="cibl-value">{{ info.supplierReceiveTime }}</view>
				</view>
				<view class="cib-list" v-if="info.state === 7">
					<view class="cibl-label">完成时间：</view>
					<view class="cibl-value">{{ info.repairTime }}</view>
				</view>
				<view class="cib-list">
					<view class="cibl-label">服务进度：</view>
					<view class="cibl-value" style="color: #EE3B3B;">
						<text v-if="info.state === 1">已提交成功，预计48小时内受理</text>
						<text v-if="info.state === 2">客服已受理，客服将尽快联系您。</text>
						<text v-if="info.state === 3">客服已派单，等待供应商接单。</text>
						<text v-if="info.state === 4">供应商已接单，等待供应商联系。</text>
						<text v-if="info.state === 7">售后已完成</text>
						<text v-if="info.state === 8">售后已关闭</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="c-action" v-if="info.state === 1">
			<button type="warn" @click.stop="replenish" :loading="btnLoading">补充凭证</button>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import uploadMedia from '@/components/uploadMedia.vue'
	import goodsDefault from '@/static/goods_default_square.png'
	import {baseUrl} from '@/common/config'
	
	export default {
		components: {
			navBar,
			uploadMedia
		},
		data() {
			return {
				goodsDefault,
				paddingTop: '',
				stepCurrent: 0,
				info: {},
				videoTypeList: ['mp4'],	// 用户可上传得视频文件类型
				btnLoading: false,
				tempIssueImageList: []
			};
		},
		computed: {
			// 判断用户评价内容是图片还是视频
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
		},
		methods: {
			delateImg(url) {
				this.info.issueImageList = this.info.issueImageList.filter(i => i !== url)
			},
			handleFile(url) {
				if(this.info.issueImageList.length < 9){
					this.info.issueImageList.push(url)
				}
			},
			// 补充售后凭证
			async replenish(){
				if(this.btnLoading === true){
					return false
				}
				try {
					this.btnLoading = true
					
					const arr = []
					this.info.issueImageList.forEach(i => {
						if(!this.tempIssueImageList.includes(i)){
							arr.push(i)
						}
					})
					
					const data = {
						id: this.info.id,
						issueImageList: arr || []
					}
					const res = await this.$request({
						method: 'POST',
						url: '/order-center/order-customer-service/addIssueImages',
						data
					})
					
					uni.showToast({
						title: res.respMsg,
						icon: 'success'
					})
					
					this.tempIssueImageList = JSON.parse(JSON.stringify(this.info.issueImageList))
					this.btnLoading = false
					
				} catch (res) {
					uni.showToast({
						title: res.respMsg,
						icon: 'error'
					})
					this.btnLoading = false
				}
			},
			// 图片预览
			handlePreviewImage(url, list){
				uni.previewImage({
					current: list.indexOf(url),
					urls: list
				})
			},
			// 视频播放出错时触发	
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			async getDetail(id){
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const res = await this.$request({
						method: 'GET',
						url: `/order-center/order-customer-service/detail/${id}`,
					})
					this.info = res.datas
					
					// 售后单状态 1待受理、2已受理 3已派单 4已接单 5待鉴定、6处理中、7已完成、8已关闭
					if(this.info.state === 7 || this.info.state === 8){
						this.stepCurrent = 4
					} else {
						this.stepCurrent = res.datas.state - 1
					}
					
					// 用于记录接口返回的图片，不做提交和删除操作
					this.tempIssueImageList = JSON.parse(JSON.stringify(this.info.issueImageList)) || []
					
					
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			}
		},
		onLoad(query){
			const { id } = query
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.getDetail(id)
		}
	}
</script>

<style lang="scss" scoped>
.container {
	// 步骤条
	.c-step {
		display: flex;
		// align-items: center;
		flex-direction: column;
		background-color: #ffffff;
		padding: 60rpx 32rpx 32rpx;
		
		// !--   进度条样式
		// 先统一设置,未满足条件的样式
		.csi-icon-un {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			border-radius: 24rpx;
			line-height: 48rpx;
			background-color: transparent;
			color: rgba(0, 0, 0, 0.40);
			border: 2rpx solid rgba(0, 0, 0, 0.40);
		}
		// 满足条件
		.csi-icon {
			width: 48rpx;
			height: 48rpx;
			text-align: center;
			border-radius: 24rpx;
			line-height: 48rpx;
			background-color: #CF1A1B;
			color: #ffffff;
			border: none;
		}

		// ---分割线
		// 全部设置成未选中
		/deep/ .u-steps-item {
			.u-steps-item__line {
				background-color: #969799 !important;
			}
		}
		// 自定义判断条件添加类名，改为选中
		/deep/ .csi-item-line {
			.u-steps-item__line {
				background-color: #CF1A1B !important;
			} 
		}

		/deep/ .u-steps-item__content {
			margin-top: 24rpx !important;
			margin-left: 0 !important;
			.u-text__value {
				font-size: 12px !important;
				color: rgba(0, 0, 0, 0.85) !important;
			}
		}
		
		// --!   进度条样式
		
		
		// 状态描述
		.cs-state {
			margin-top: 38rpx;
			padding: 26rpx 28rpx;
			background-color: rgba(255, 242, 242, 1);
			border: 2rpx solid rgba(255, 222, 222, 1);
			border-radius: 20rpx;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.85);
			display: flex;
			.img image {
				width: 44rpx;
				height: 34rpx;
				margin-top: 10rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 18rpx;
				.desc {
					line-height: 24px;
					word-break: break-all;
				}
				.time {
					font-size: 13px;
					color: rgba(0, 0, 0, 0.45);
					margin-top: 24rpx;
				}
			}
			
			// 售后关闭
			.css-box {
				display: flex;
			}
		}
	}
	
	// 标题
	.c-title {
		box-sizing: border-box;
		padding: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		text-shadow: 0 0 0.1px currentColor;
	}
	
	.c-result {
		margin-top: 20rpx;
		background-color: #ffffff;
		.cr-content {
			padding: 32rpx;
			.cr-desc {
				margin-bottom: 32rpx;
			}
			// !-- 售后主题
			.cr-remarks {
				color: rgba(0, 0, 0, 0.65);
				margin: 32rpx 0;
			}
			// --！
			.cr-img-list {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				width: 100%;
				.cr-img {
					position: relative;
					width: 32%;
					margin: 0 8rpx 8rpx 0;
					image,
					video {
						width: 100%;
						height: 176rpx;
					}
					.media-delte {					
						position: absolute;
						top: 0;
						right: 0;
						background-color: #373737;
						height: 14px;
						width: 14px;
						display: flex;
						flex-direction: row;
						border-bottom-left-radius: 100px;
						align-items: center;
						justify-content: center;
						z-index: 3;
						/deep/ .uni-icons {
							line-height: 10px;
							position: absolute;
							right: 2rpx;
							top: 2rpx;
						}
					}
				}
				
				// 上传
				.uploadMedia {
					width: 32% !important;
				}
				
			}
		}
	}
	
	.c-goods {
		margin-top: 20rpx;
		background-color: #ffffff;
		.content {
			padding: 32rpx;
			display: flex;
			.img image {
				height: 176rpx;
				width: 176rpx;
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 28rpx 0 18rpx;
				margin-left: 26rpx;
				.name {
					font-size: 15px;
					color: rgba(0, 0, 0, 0.85);
					word-wrap: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					text-shadow: 0 0 0.1px currentcolor;
				}
				.num {
					font-size: 13px;
					color: #EE3B3B;
					.label {
						color: rgba(0, 0, 0, 0.65);
					}
				}
			}
		}
	}
	
	.c-info {
		margin-top: 20rpx;
		background-color: #ffffff;
		.ci-bottom {
			box-sizing: border-box;
			padding: 32rpx;
			.cib-list {
				display: flex;
				font-size: 14px;
				margin-bottom: 32rpx;
				.cibl-label {
					color: rgba(0, 0, 0, 0.65);
				}
				.cibl-value {
					flex: 1;
					margin-left: 64rpx;
					color: rgba(0, 0, 0, 0.85);
					word-wrap: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	.c-action {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 178rpx;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx 32rpx 68rpx;
		box-sizing: border-box;
		box-shadow: 0rpx -10rpx 20rpx 1rpx rgba(0,0,0,0.1);
		button {
			
		}
	}
}
</style>
